<template>
	<xn-form-container
		:title="formData.id ? '编辑用户' : '增加用户'"
		:width="800"
		:visible="visible"
		:destroy-on-close="true"
		:body-style="{ 'padding-top': '0px' }"
		@close="onClose"
	>
		<a-form ref="formRef" :model="formData" :rules="formRules" layout="vertical">
			<a-tabs v-model:activeKey="activeTabsKey">
				<a-tab-pane key="1" tab="基础信息" force-render>
					<a-row :gutter="16">
						<a-col :span="12">
							<a-form-item label="姓名：" name="name">
								<a-input v-model:value="formData.name" placeholder="请输入姓名" allow-clear />
							</a-form-item>
						</a-col><a-col :span="12">
							<a-form-item label="头像：" name="avatar">
								<a-upload
									v-model:file-list="fileList"
									name="avatar"
									list-type="picture-card"
									class="avatar-uploader"
									:show-upload-list="false"
									:before-upload="beforeUpload"

								>
									<img v-if="formData.avatar" :src="formData.avatar" alt="avatar" style="width: 100px;height: 100px"/>
									<div v-else>
										<loading-outlined v-if="loading"></loading-outlined>
										<plus-outlined v-else></plus-outlined>
										<div class="ant-upload-text">上传头像</div>
									</div>
								</a-upload>
							</a-form-item>
						</a-col>
						<a-col :span="12">
							<a-form-item label="性别：" name="sex">
								<a-radio-group v-model:value="formData.sex" :options="genderOptions" />
							</a-form-item> </a-col
						><a-col :span="12">
							<a-form-item label="状态：" name="status">
								<a-radio-group v-model:value="formData.status" :options="[{ label:'开启',value:'ENABLE' },{label: '关闭',value:'DISABLED'}]" />
							</a-form-item>
						</a-col>
						<a-col :span="12">
							<a-form-item label="年龄：" name="age">
								<a-input v-model:value="formData.age" placeholder="请输入年龄" allow-clear />
							</a-form-item> </a-col
						><a-col :span="12">
							<a-form-item label="身份证号：" name="idCard">
								<a-input v-model:value="formData.idCard" placeholder="请输入身份证号" allow-clear />
							</a-form-item>
						</a-col>
						<a-col :span="12">
							<a-form-item label="手机号：" name="phone">
								<a-input v-model:value="formData.phone" placeholder="请输入手机" allow-clear />
							</a-form-item>
						</a-col>
						<a-col :span="12">
							<a-form-item label="密码：" name="password">
								<a-input v-model:value="formData.password" placeholder="请输入密码" allow-clear />
							</a-form-item>
						</a-col>
					</a-row>

					<a-row :gutter="16">
						<a-col :span="12">
							<a-form-item label="分账角色：" name="fzRole">
								<a-radio-group v-model:value="formData.fzRole" :options="fzRoleOptions" />
							</a-form-item>
						</a-col>
						<a-col :span="12">
							<a-form-item label="分账类型：" name="fzType">
								<a-radio-group v-model:value="formData.fzType" :options="fzTypeOptions" />
							</a-form-item>
						</a-col>
						<a-col :span="12">
							<a-form-item label="分账数值：" name="fzValue">
								<a-input v-model:value="formData.fzValue" placeholder="请输入分账数值" allow-clear />
							</a-form-item>
						</a-col>
						<a-col :span="12">
							<a-form-item label="选择上级：" name="parentId">
								<a-select
									v-model:value="formData.parentId"
									style="width: 100%"
									placeholder="Tags Mode"
									:options="fzUserList"
									:field-names="{ label: 'name', value: 'id' }"
								>
								</a-select>
							</a-form-item>
						</a-col>
					</a-row>
					<a-row :gutter="16"> </a-row>
				</a-tab-pane>
			</a-tabs>
		</a-form>
		<template #footer>
			<a-button style="margin-right: 8px" @click="onClose">关闭</a-button>
			<a-button type="primary" :loading="formLoading" @click="onSubmit">保存</a-button>
		</template>
	</xn-form-container>
</template>

<script setup>
import { message } from 'ant-design-vue';
	import fzUserApi from '@/api/biz/fzUserApi'
	import { required } from '@/utils/formRules'
	import tool from '@/utils/tool'
	import userCenterApi from '@/api/sys/userCenterApi'
	// 默认是关闭状态
	const visible = ref(false)
	const formRef = ref()
	const activeTabsKey = ref('1')
	const emit = defineEmits({ successful: null })
	const formLoading = ref(false)

	// 表单数据
	const formData = ref({})

	// 打开抽屉
	const onOpen = (record) => {
		visible.value = true
		formData.value = {
			sex: '男',
			positionJson: []
		}
		if (record) {
			convertFormData(record)
		}
	}
	// 关闭抽屉
	const onClose = () => {
		visible.value = false
	}
	// 回显数据
	const convertFormData = (record) => {
		const param = {
			id: record.id
		}
		// 查询详情
		fzUserApi.detail(param).then((data) => {
			if (data.positionJson) {
				// 替换表单中的格式与后端查到的
				data.positionJson = JSON.parse(data.positionJson)
			}
			formData.value = Object.assign(formData.value, data)
			getFzUserList()
		})
	}

	// 默认要校验的
	const formRules = {
		name: [required('请输入')],
		sex: [required('请选择')],
		fzRole: [required('请选择')],
		fzType: [required('请选择')],
		fzValue: [required('请选择')],
		idCard: [required('请输入')],
		password: [required('请输入')],
		phone: [required('请输入')],
		status: [required('请选择')]
	}
	//获取上级用户列表
	const fzUserList = ref([])
	function getBase64(img, callback) {
		const reader = new FileReader();
		reader.addEventListener('load', () => callback(reader.result));
		reader.readAsDataURL(img);
	}
	const getFzUserList = () => {
		fzUserApi.list().then((data) => {
			console.log(data)
			fzUserList.value = data
		})
	}
	const loading=ref(false);
	const fileList = ref([])
	const beforeUpload = (file) => {
		loading.value = true
		const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
		if (!isJpgOrPng) {
			message.error('请上传JPG或PNG图片!');
		}
		const isLt2M = file.size / 1024 / 1024 < 4;
		if (!isLt2M) {
			message.error('上传图片最大为 4MB!');
		}
		if(isJpgOrPng && isLt2M){
			getBase64(file, (imageUrl) => {
				console.log(imageUrl)
				formData.value.avatar = imageUrl
			})
		}
		logging.value = false
		return false;
	};
	// 验证并提交数据
	const onSubmit = () => {
		formRef.value.validate().then(() => {
			// 因为不切断，我下面转换数据格式，影响上面表单会报错
			let formDatas = JSON.parse(JSON.stringify(formData.value))
			formLoading.value = true
			fzUserApi
				.submitForm(formDatas, formDatas.id)
				.then(() => {
					onClose()
					emit('successful')
				})
				.finally(() => {
					formLoading.value = false
				})
		})
	}
	// 性别
	const genderOptions = tool.dictList('GENDER')
	// 分账角色
	const fzRoleOptions = tool.dictList('FXR_ROLE_NAME')
	//分账类型
	const fzTypeOptions = tool.dictList('FXR_FY_TYPE')
	// 调用这个函数将子组件的一些数据和方法暴露出去
	defineExpose({
		onOpen
	})
</script>

<style scoped type="less">
	.childAddButton {
		margin-bottom: 10px;
	}
	.form-row {
		background-color: var(--item-hover-bg);
		margin-left: 0px !important;
	}
	.form-row-con {
		padding-bottom: 5px;
		padding-top: 5px;
		padding-left: 15px;
	}
	.form-div {
		padding-top: 10px;
	}
</style>
